

<template>
    <div class="custom-tree-container">
 
    <div class="block">
      <p>使用 scoped slot</p>
      <el-tree
        :data="data"
        show-checkbox
        node-key="id"
        default-expand-all
        :expand-on-click-node="false">
        <span class="custom-tree-node" slot-scope="{ node, data }">
          <span>{{ node.label }}</span>
          <span>
            <el-button
              type="text"
              size="mini"
              @click="() => append(data)">
              Append
            </el-button>
            <el-button
              type="text"
              size="mini"
              @click="() => remove(node, data)">
              Delete
            </el-button>
          </span>
        </span>
      </el-tree>
    </div>
  </div>
  
</template>

  <script>
    let id = 1000;
  
    export default {
      data() {
        const data = [{
          id: 1,
          label: '一级 1',
          parentId:0,
          children: [{
            id: 4,
            label: '二级 1-1',
            parentId:1,
            children: [{
              id: 9,
              label: '三级 1-1-1',
              parentId:4
            }, {
              id: 10,
              label: '三级 1-1-2',
              parentId:4
            }]
          }]
        }, {
          id: 2,
          label: '一级 2',
          children: [{
            id: 5,
            label: '二级 2-1'
          }, {
            id: 6,
            label: '二级 2-2'
          }]
        }, {
          id: 3,
          label: '一级 3',
          children: [{
            id: 7,
            label: '二级 3-1'
          }, {
            id: 8,
            label: '二级 3-2'
          }]
        }];
        return {
          data: JSON.parse(JSON.stringify(data)),
          data: JSON.parse(JSON.stringify(data))
        }
      },
  
      methods: {
        append(data) {
          const newChild = { id: id++, label: 'testtest', children: [] };
          if (!data.children) {
            this.$set(data, 'children', []);
          }
          data.children.push(newChild);
        },
  
        remove(node, data) {
          //data.id  当前点击的id

          //id跟数据库里面parentId 相等
          console.log(data)
          const parent = node.parent;
          console.log('parent==',parent)
          const children = parent.data.children || parent.data;
          console.log('children==',children)
          const index = children.findIndex(d => d.id === data.id);  //下级父id
          console.log('index==',index)
          children.splice(index, 1);
        },
  
        renderContent(h, { node, data, store }) {
          return (
            <span class="custom-tree-node">
              <span>{node.label}</span>
              <span>
                <el-button size="mini" type="text" on-click={ () => this.append(data) }>Append</el-button>
                <el-button size="mini" type="text" on-click={ () => this.remove(node, data) }>Delete</el-button>
              </span>
            </span>);
        }
      }
    };
  </script>
  
  <style scoped lang="less">
    .custom-tree-node {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-size: 13px;
      padding-right: 8px;
    }
  </style>